<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Excel查找程序</title>
    <!-- Bootstrap CSS link -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body class="container mt-5">
    <h2 class="mb-4">Excel查找程序</h2>
    <form action="/uploadfiles/" method="post" enctype="multipart/form-data">
        <div class="custom-file mb-3">
            <input type="file" class="custom-file-input" id="file1" name="file1" accept=".xlsx, .xls" required onchange="updateFileName('file1')">
            <label class="custom-file-label" for="file1">选择导入手工Excel</label>
        </div>
        <div class="custom-file mb-3">
            <input type="file" class="custom-file-input" id="file2" name="file2" accept=".xlsx, .xls" required onchange="updateFileName('file2')">
            <label class="custom-file-label" for="file2">选择查找Excel</label>
        </div>
        <button class="btn btn-primary" type="submit">导出结果</button>
    </form>
    <br>
<!--    <button class="btn btn-secondary" onclick="showMessageBox()">弹出消息框</button>-->

    <!-- Bootstrap JS and Popper.js scripts (place them before the closing </body> tag) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        function updateFileName(fileId) {
            var input = document.getElementById(fileId);
            var label = $(input).next('.custom-file-label');
            var fileName = input.files[0].name;
            label.html(fileName);
        }

        function showMessageBox() {
            jQuery.post("/showmessage/", function(data) {
            alert(data.message);
        });
        }
    </script>

</body>
</html>
